<template>
  <div class="content">
    <div class="commentItem" v-for="item in list" :key="item.id">
      <div class="left">
        <!-- <img :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/2/w/64/h/64/format/webp')" alt="" /> -->
        <t-avatar
          size="64px"
          v-if="item.coverUrl"
          :image="urls + item.coverUrl + '?imageView2/3/w/128/h/128/format/webp'"
        >
        </t-avatar>
        <t-avatar v-else size="64px" image="https://static.jiyi.show/assets/img/userImg.png"> </t-avatar>
      </div>
      <div class="rigth-parent">
        <div class="rigth">
          <div class="rigth-top">
            <div class="name">
              {{ item.name }}
            </div>
            <div class="data">
              {{ item.createDate.slice(0, -3).replace(/\//g, '-') }}
            </div>
          </div>
          <div class="rigth-footer" :style="{ color: props.textColor }">
            {{ item.content }}
          </div>
        </div>
        <div
          class="replyContent"
          v-if="item.replyContent"
          :style="{ background: props.bgColor, color: props.replyColor }"
        >
          <div>
            <span class="reply-text1">回复</span><span class="reply-text3">{{ item.replyDate }}</span>
          </div>
          <div class="reply-text2">
            {{ item.replyContent }}
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="isnull" v-if="list.length === 0">没有更多数据了</div> -->
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { commentList } from '@/api/comment/comment';
import { constant } from 'lodash';
import { useProjectStore } from '@/store';
import { urls } from '@/utils/request/upload';
import { computed, defineComponent, reactive, ref, watch } from 'vue';
import { StyleImage10, colorList10 } from '@/pages/templatePage/data';
export default defineComponent({
  name: 'CommentList',
});
</script>
<script lang="ts" setup>
// @ts-nocheck
const emit = defineEmits(['emitTotal']);
const total = ref();
const list = ref([]);
const store = useProjectStore();
const props = defineProps<{
  showpieceId: any;
  textColor: {
    type: String;
  };
  bgColor: {
    type: String;
  };
  replyColor: {
    type: String;
    default: 'rgba(50, 43, 37, 1)';
  };
}>();
const parmas = reactive({
  CommentStatus: 3,
  showpieceId: 0, //展品主键
  projectId: Number(localStorage.getItem('projectId')), //项目主键
  value: '', //关键字
  pageNo: 1,
  pageSize: 999,
  isSelf: 0,
});

const myCurrent = ref(parmas.pageNo);
const init = async () => {
  try {
    parmas.showpieceId = props.showpieceId;
    let { data } = await commentList(parmas);
    total.value = data.total;
    emit('emitTotal', data.total);
    list.value = data.data;
  } catch {}
};
init();

// 切换分页事件
const currentChange = (current: number) => {
  parmas.pageNo = current;
  myCurrent.value = current;
  init();
};
// 计算分页总数量限制跳转

//  监听v-model的改变并且判断是否和之前的值一样，进行更新数据
watch(myCurrent, (newValue) => {
  if (newValue != parmas.pageNo) {
    parmas.pageNo = Number(newValue);
    init();
  }
});

watch(
  () => props.showpieceId,
  () => {
    init();
  },
);
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 50px;
}
.rigth-parent {
  // width: calc(100% - 84px);
  width: 100%;
  flex-shrink: 1;
}
.rigth-footer {
  display: block;
  font-size: 17px;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.8);
  width: calc(100% - 84px + 84px);
  margin-top: 4px;
  margin-bottom: 8px;
  text-align: justify;
}
.data {
  font-size: 14px;
  color: rgba(50, 43, 37, 0.5);
  line-height: 24px;
  margin-left: 8px;
}
.name {
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.59);
}
.rigth-top {
  display: flex;
}
.left img {
  border-radius: 50%;
  width: 64px;
  height: 64px;
}
.left {
  margin-right: 12px;
  // :deep(.t-avatar) {
  //   width: 64px !important;
  //   height: 64px !important;
  // }
  :deep(.t-avatar > .t-image__wrapper) {
    width: 64px !important;
    height: 64px !important;
  }
}
.commentItem {
  display: flex;
  margin-bottom: 3.33vh;
  width: 100%;
  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.isnull {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  font-size: 16px;
  color: #0a0b30;
}
.commentNum {
  color: #0a0b30;
}
.replyContent {
  // margin-left: 24px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(218, 211, 190, 0.6);
  border-radius: 4px;
  .reply-text1 {
    color: rgba(0, 0, 0, 0.38);
    padding-right: 8px;
    opacity: 0.6;
    font-size: 14px;
    line-height: 22px;
  }
  .reply-text3 {
    color: rgba(0, 0, 0, 0.38);
    padding-right: 8px;
    opacity: 0.6;
    font-size: 14px;
    line-height: 22px;
  }
  .reply-text2 {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 32px;
  }
}
</style>
